<template>
	<div class="com-team-content">
		<div class="ourTeam">
			<div class="swiper" style="overflow: hidden;" id="ourTeamSwiper">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide pointer" v-for="(item,index) in tdcyList" :key="'hzhb'+index" @click="goGwDetail(item.id)">
						<el-popover
						    placement="right-start"
						    title="团队成员"
							width="380"
						    trigger="hover"
						    >
						    <div>
								<div class="flex">
									<div class="teamEwm"><el-image :src="item.qrCode" fit="cover"></el-image></div>
									<div class="base-font-13 text-666" style="padding-left:10px;">
										<div class="base-font-14 text-bold text-orange">{{item.name}}</div>
										<div class="margin-top-15">邮箱：{{item.email}}</div>
										<div class="margin-top-5">手机：{{item.phone}}</div>
									</div>
								</div>
								<div class="base-font-14 margin-top-10">个人简介:{{item.description}}</div>
							</div>
						 
						<div slot="reference" class="ourTeamItem" @mouseenter="teamMouseenter(item)" @mouseleave="teamMouseleave(item)">
							<div class="ourTeamAvatar"><el-image :src="item.headImage" fit="cover"></el-image></div>
							<div class="base-font-18 text-bold margin-top-30">{{item.name}}</div>
							<div class="flex align-center justify-center contactUsBtn">
								<i class="el-icon-chat-line-round"></i>
								<span class="margin-left-6">在线咨询</span>
							</div>
							<div class="base-font-15 text-999 margin-top-10 ellipsis3">{{item.description}}</div>
						</div>
						 </el-popover>
			
			        </div>
			    </div>
			</div>
		</div>
	</div>
</template>

<script>
	import Swiper from 'swiper/swiper-bundle'
	import 'swiper/swiper-bundle.css';
	import 'swiper/swiper-bundle.min.css';
	export default{
		data(){
			return{
				tdcyList:[]
			}
		},
		mounted() {
			
			this.getSelectWebsiteTeamList()
		},
		methods:{
			//团队
			getSelectWebsiteTeamList(){
				this.$selectWebsiteTeamList().then(res => {
					if (res.code === 0) {
						this.tdcyList=res.data
						this.initHzhbSwiper()
					}
				})
			},
			initHzhbSwiper() {
			    let _self = this
			    _self.swiper=new Swiper('#ourTeamSwiper', {
					slidesPerView:5,
					spaceBetween:35,
					autoplay: {
							disableOnTnteraction: true,
							delay:3000,
					},
			        observer: true, //修改swiper自己或子元素时，自动初始化swiper
			        observeParents: true, //修改swiper的父元素时，自动初始化swiper
			        on: {
			            slideChangeTransitionStart: function () {
			            },
			            transitionEnd: function () {
			                
			            },
			            init: function (swiper) { 
			            },
			        }
			    })
			},
			teamMouseenter(index){
				this.swiperIndex=index
				this.swiper.autoplay.stop()
			},
			teamMouseleave(index){
				this.swiperIndex=-1
				this.swiper.autoplay.start()
			},
			goGwDetail(id){
				this.$router.push({
					path: '/gw',
					query: {
						id: id,
					}
				})
			}
				
		}
		
	}
</script>

<style lang="scss" scoped>
	.ourTeamItem{
		border:1px solid #f6f7f9;padding:30px;
		.ourTeamAvatar{width:100%;height:170px;border-radius:85px 85px 85px 0;overflow: hidden;
			.el-image{width:100%;height:170px;}
		
		}
		&:hover{border:1px solid #f6f7f9;border-radius:16px;box-shadow:0 0 20px #eeeeee;}
		.address{height:30px;line-height:30px;padding:0 20px;background:#5A60CE;display:inline-block;color:#FFFFFF;}
		.contactUsBtn{height:30px;line-height:30px;margin-top:15px;border:1px solid;color:#ef9b76;border-radius:10px;}
	}

	
</style>